<template>
  <div id="usedLand" class="usedland-demo" />

</template>
<script setup>
// 引入echart和json数据
import * as echarts from 'echarts'
import { getLandUsed } from '@/api/board'
import { onMounted } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
const emit = defineEmits(['change'])
const userStore = useUserStore()

// 设置echart数据
const setOption = (res) => {
  var chartDom = document.getElementById('usedLand')
  var myChart = echarts.init(chartDom)

  const option = {
    tooltip: {
      trigger: 'item',
      show: false,
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      show: false,
      data: ['已使用', '未使用']
    },
    series: [
      {
        name: '',
        type: 'pie',
        // selectedMode: 'single',
        radius: [0, '60%'],
        label: {
          position: 'center',
          fontSize: 15,
          color: '#fff',
        },
        labelLine: {
          show: false
        },
        hoverOffset: 0,
        data: [{ value: res.ysyAreaSize, name: res.ysyAreaSize + '亩', itemStyle: { color: '#00E8A550' }}]
      },
      {
        name: '',
        type: 'pie',
        radius: ['70%', '90%'],
        labelLine: {
          length: 30
        },
        label: {
          show: false
        },
        data: [
          { value: res.ysyAreaSize || 0, name: '已使用', itemStyle: {
            color: '#02B583'
          }},
          { value: res.wsyAreaSize || 0, name: '未使用', itemStyle: {
            color: '#A7ABAB80'
          }}
        ]
      },
      {
        name: '',
        type: 'pie',
        radius: ['98%', '100%'],
        hoverOffset: 0,
        labelLine: {
          length: 40
        },
        label: {
          show: false
        },
        data: [
          { value: 135, name: '已使用', itemStyle: {
            color: '#02B58380'
          }}
        ]
      }
    ]
  }

  option && myChart.setOption(option)
}

onMounted(() => {
  getLandUsed({ farmId: userStore.userInfo.farmId }).then((res) => {
    emit('change', res.data)
    setOption(res.data)
  })
})
</script>
<style lang="scss">
.usedland-demo {
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-50%;
    z-index:99;
}
</style>
